import React from 'react'
import './parent.css'
import { Child } from './Child';
export class Parent extends React.Component{
  // 父组件数据
state = {
  list: [
    {
      id: 1,
      name: '超级好吃的棒棒糖',
      price: 18.8,
      info: '开业大酬宾，全场8折',
    },
    {
      id: 2,
      name: '超级好吃的大鸡腿',
      price: 34.2,
      info: '开业大酬宾，全场8折',
    },
    {
      id: 3,
      name: '超级无敌的冰激凌',
      price: 14.2,
      info: '开业大酬宾，全场8折',
    },
  ],
};

// 父组件UI结构
render() {
  return (
    // 父组件
    <div className="parent">
      <h1>父组件</h1>
      {/* 把下面UI抽离为子组件 */}
      {this.state.list.map(item=>{
        return <Child key={item.id} list={item}/>
      })}
     
    </div>
  );
}
}